// 1.js将图片转成base64
var img = "imgurl";//imgurl 就是你的图片路径

function getBase64Image(img) {
     var canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
     var ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0, img.width, img.height);
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
     var dataURL = canvas.toDataURL("image/"+ext);
     return dataURL;
}

var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}


// 2.通过canvas画圆角矩形
private drawCanvas(obj: any) {
  const imgDom = obj.container.querySelector('.course-img');
  const canvas = document.createElement('canvas');
  let ctx: any = (canvas as any).getContext('2d');
  canvas.width = obj.width;
  canvas.height = obj.height;
  ctx.fillStyle = '#fff';
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = remToPx('.05rem');
  ctx.shadowColor = "#E2E7FF";
  ctx.shadowBlur = this.blurDiamet;

  ctx.beginPath();
  if (obj.cur === 1) { //第一个
    ctx.moveTo(this.blurDiamet+this.radiusDiamet, this.blurDiamet);
    ctx.lineTo(obj.width-this.blurDiamet-this.radiusDiamet, this.blurDiamet);
    ctx.arc(obj.width-this.blurDiamet-this.radiusDiamet, this.blurDiamet+this.radiusDiamet, this.radiusDiamet, 3*Math.PI/2, 0, false);
    ctx.lineTo(obj.width-this.blurDiamet, obj.height-this.blurDiamet-this.radiusDiamet);
    ctx.arc(obj.width-this.blurDiamet-this.radiusDiamet, obj.height-this.blurDiamet-this.radiusDiamet, this.radiusDiamet, 0, Math.PI/2);
    ctx.lineTo(this.blurDiamet+this.radiusDiamet, obj.height-this.blurDiamet-this.diffValue);
    ctx.arc(this.blurDiamet+this.radiusDiamet, obj.height-this.blurDiamet-this.radiusDiamet-this.diffValue, this.radiusDiamet, Math.PI/2, Math.PI);
    ctx.lineTo(this.blurDiamet, this.blurDiamet+this.radiusDiamet);
    ctx.arc(this.blurDiamet+this.radiusDiamet, this.blurDiamet+this.radiusDiamet, this.radiusDiamet, Math.PI, 3*Math.PI/2);
  }

  ctx.closePath();
  ctx.fill();

  imgDom.src = canvas.toDataURL("image/png")
}



// 画圆角矩形图片(这种方式安卓不兼容)
// function circleImgRect(ctx, img, x, y, w, h, r) {
//     // 画一个图
//     if (w < 2 * r) r = w / 2;
//     if (h < 2 * r) r = h / 2;
//     ctx.beginPath();
//     ctx.moveTo(x + r, y);
//     ctx.arcTo(x + w, y, x + w, y + h, r);
//     ctx.arcTo(x + w, y + h, x, y + h, r);
//     ctx.arcTo(x, y + h, x, y, r);
//     ctx.arcTo(x, y, x + w, y, r);
//     ctx.closePath();
//     ctx.strokeStyle = '#FFFFFF'; // 设置绘制圆形边框的颜色
//     ctx.stroke();
//     ctx.clip();
//     ctx.drawImage(img, x, y, w, h);
// }
// 
// 


function circleImgRect(ctx, img, x, y, w, h, r) {
    // 画一个图
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.setFillStyle('#fff');

    // 开始绘制
    ctx.beginPath();
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.lineTo(x + w, y + r);
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + w, y + h - r);
    ctx.lineTo(x + w - r, y + h);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + h);
    ctx.lineTo(x, y + h - r);
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    ctx.lineTo(x, y + r);
    ctx.lineTo(x + r, y);
    ctx.closePath();
    ctx.fill();
    // ctx.draw();
    // var imgElm = new Image();
    // imgElm.src = img;
    // imgElm.onload = function() {
    //     // var pattern = ctx.createPattern(imgElm, 'repeat');
    //     // ctx.fillStyle = pattern;
    //     ctx.closePath()
    //     ctx.fill();
    // }
    ctx.drawImage(img, x, y, w, h);
}


// 3. 